<template>
	<div class="app-container">
		<el-button class="top-left" type="danger" @click="backRoom">返回</el-button>
		<h2>{{title}}</h2>
		<div class="index-panel" :class="treeArr.length<=5?'one-panel':''" v-if="deptType">
			<div v-if="deptId == 203" @click="openHtml"
				:class="treeArr.length<=5?'panel-one':treeArr.length<=10?'panel-two':treeArr.length<=15?'panel-three':''">
				建华民兵
			</div>
			<div v-for="(item,key) in treeArr" :key="key"
				:class="treeArr.length<=5?'panel-one':treeArr.length<=10?'panel-two':treeArr.length<=15?'panel-three':''"
				@click="changeDeptId(item.id,item.label)">{{item.label}}
			</div>
		</div>
		<div class="bottom-left">
			<el-button type="danger" @click="(huiyiList = true)">加入会议</el-button>
			<el-button type="danger" @click="(lishiList = true)">历史会议</el-button>
			<!-- <el-button type="danger" @click="getQjList">请假信息</el-button> -->
		</div>
		<el-dialog title="会议列表" :visible.sync="huiyiList" width="70%" :before-close="handleClose">
			<div style="height:58vh;overflow-x: hidden;">
				<el-card class="box-card" v-for="(item, key) in meetingList" :key="key"
					style="margin-bottom: 20px;margin-right: 10px;">
					<el-row>
						<el-row>
							<el-col :span="12">
								<p>发起人：{{item.masterName}}</p>
							</el-col>
							<el-col :span="12">
								<p>{{item.beginTime}}</p>
							</el-col>
						</el-row>
						<el-col :span="24">会议标题：{{item.meetingName}}</el-col>
						<el-col :span="24">
							<el-button style="float: right; padding: 3px 0" type="text" @click="enterRoom(item)">进入会议
							</el-button>
						</el-col>
					</el-row>
				</el-card>
				<div v-if="meetingList.length == 0" style="text-align: center;">
					暂无会议
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="(huiyiList = false)">取 消</el-button>
			</span>
		</el-dialog>
		<el-dialog title="历史会议" :visible.sync="lishiList" width="70%" :before-close="handleClose">
			<div style="height: 58vh;overflow-x: hidden;">
				<el-card class="box-card" v-for="(item,key) in hyList" :key="key" style="margin-bottom: 20px;">
					<!-- <div slot="header" class="clearfix">
						<span>
							<span class="quanxuan" :class="item.all?'all':''" v-show="showType"
								@click="itemAll(key)">全选</span>
							{{item.date}}
						</span>
						<span style="float: right; padding: 3px 0">{{item.new}}</span>
					</div> -->
					<el-row class="huiyi-box">
						<el-col :span="18" class="huiyi-info">
							<span>
								{{item.meetingName}}
							</span>
							<p>{{item.masterName}}</p>
							<span>{{item.beginTime}}</span>
						</el-col>
						<el-col :span="6" class="huiyi-detail">
							<div @click="goHyDetail(item)">
								详情>
							</div>
						</el-col>
					</el-row>
				</el-card>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="(lishiList = false)">取 消</el-button>
			</span>
		</el-dialog>
		<el-dialog title="请假列表" :visible.sync="qjlb" width="80%">
			<el-button type="danger" @click="(qjsq = true)">新增</el-button>
			<el-table :data="tableData" style="width: 100%;" size="medium" :cellStyle="{fontSize:'16px'}" height="400"
				fit="true">
				<el-table-column prop="userName" label="姓名" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="deptName" label="所在分队" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="userOffice" label="职务" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="reasons" label="事由" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="leaveTime" label="离队时间" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="backTime" label="归队时间" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="phonenumber" label="联系电话" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="originDept" label="原单位" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="remark" label="备注" show-overflow-tooltip>
				</el-table-column>
				<el-table-column prop="remark" label="备注" show-overflow-tooltip>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button @click.native.prevent="deleteRow(scope.$index,scope.row)" type="text" size="small">
							删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total > 0" :total="queryParams.total" :page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize" @pagination="getQjList" style="margin: 0 auto;" />
			<span slot="footer" class="dialog-footer">
				<el-button type="danger" @click="(qjlb = false)">取 消</el-button>
				<!-- <el-button type="primary" @click="doChangePwd">确 定</el-button> -->
			</span>
		</el-dialog>
		<!-- 添加或修改用户请假信息对话框 -->
		<el-dialog title="请假申请" :visible.sync="qjsq" append-to-body width="50%">
			<el-form ref="form" :model="qjform" :rules="rules" label-width="80px">
				<!-- <el-form-item label="部门ID" prop="deptId">
		      <el-input v-model="qjform.deptId" placeholder="请输入部门ID" />
		    </el-form-item> -->
				<el-form-item label="姓名" prop="userName">
					<el-input v-model="qjform.userName" placeholder="请输入姓名" />
				</el-form-item>
				<el-form-item label="所在分队" prop="deptName">
					<el-input v-model="qjform.deptName" placeholder="请输入所在分队" />
				</el-form-item>
				<el-form-item label="职务" prop="userOffice">
					<el-input v-model="qjform.userOffice" placeholder="请输入职务" />
				</el-form-item>
				<el-form-item label="事由" prop="reasons">
					<el-input v-model="qjform.reasons" placeholder="请输入事由" />
				</el-form-item>
				<el-form-item label="离队时间" prop="leaveTime">
					<el-date-picker clearable v-model="qjform.leaveTime" type="date" value-format="yyyy-MM-dd"
						placeholder="请选择离队时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="归队时间" prop="backTime">
					<el-date-picker clearable v-model="qjform.backTime" type="date" value-format="yyyy-MM-dd"
						placeholder="请选择归队时间">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="联系电话" prop="phonenumber">
					<el-input v-model="qjform.phonenumber" placeholder="请输入联系电话" />
				</el-form-item>
				<el-form-item label="原单位" prop="originDept">
					<el-input v-model="qjform.originDept" placeholder="请输入原单位" />
				</el-form-item>
				<el-form-item label="备注" prop="remark">
					<el-input v-model="qjform.remark" type="textarea" placeholder="请输入内容" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="(qjsq = false)">取 消</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		treeselect
	} from "@/api/system/dept";
	import {
		ticket
	} from "@/api/trtc";
	import {
		listUser
	} from "@/api/system/user";
	import {
		addMeeting,
		listMeeting
	} from "@/api/system/meeting";
	import {
		addSendsms
	} from "@/api/system/sendsms";
	import {
		listLeave,
		getLeave,
		delLeave,
		addLeave,
		updateLeave,
	} from "@/api/system/leave";
	export default {
		data() {
			return {
				rules: {
					userName: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					deptId: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					deptName: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					userOffice: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					reasons: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					leaveTime: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					backTime: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					phonenumber: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					originDept: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
					remark: [{
						required: true,
						message: "不能为空",
						trigger: "blur"
					}],
				},

				qjform: {

				}, //请假表单
				total: 1,
				tableData: [{
					date: '2016-05-02',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1518 弄'
				}, {
					date: '2016-05-04',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1517 弄'
				}, {
					date: '2016-05-01',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1519 弄'
				}, {
					date: '2016-05-03',
					name: '王小虎',
					address: '上海市普陀区金沙江路 1516 弄'
				}],
				qjlb: false, //请假列表
				qjsq: false, //请假申请
				meetingList: [], //可参加的会议
				hyList: [{
					date: "4月26日 周二",
					new: "2022年",
					list: [{
						id: "856 528 939",
						title: "鸿雁（大森林）预定会议",
						time: "入会时间：12:41 发起人：鸿雁（大森林）",
					}, ],
				}, ],
				lishiList: false, //历史会议
				huiyiList: false, //会议列表
				deptType: true, //选择部门
				smsInfo: {
					status: 0,
					masterId: 0,
					smsContent: "",
					beginTime: "",
					receiveMembers: "",
				},
				dxVisible: false, //发短信的弹出层
				hyVisible: false, //创建会议的弹出层
				form: {},
				info: {
					realName: "张三",
					name: "未命名",
					time: "2022-05-03 10:00:00 - 13:00:00",
					id: "123456789",
				},
				treeData: [],
				treeArr: [],
				defaultProps: {
					children: "children",
					label: "label",
				},
				currentCheckData: {}, // 当前选中的值
				userList: [],
				// 查询参数
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					userName: undefined,
					phonenumber: undefined,
					status: undefined,
					deptId: undefined,
				},
				selected_user_nums: [],
				meetingInfo: {
					status: 0,
					masterId: 0,
					meetingName: "",
					beginTime: "",
					meetingRoomId: "",
					meetingMembers: "",
				},
				deptId: -1,
				sdkInfo: {},
				title: null,
			};
		},
		computed: {
			...mapGetters(["userId"]),
			...mapGetters(["userObj"]),
		},
		created() {
			this.loadTreedata();
			this.getMeetings();
			let deptId = this.$route.query.dept;
			this.queryParams.deptId = deptId
			this.deptId = deptId
			console.log(deptId)
			this.get_ticket();
			this.title = this.$route.query.name
		},
		methods: {
			deleteRow(a, b) {
				delLeave(b.id).then(res => {
					if (res.code == 200) {
						this.$message.success('删除成功')
						this.getQjList();
					} else {
						this.$message.error('删除失败')
					}
					console.log(res)
				})
			},
			get_ticket() {
				//获取客户票据
				ticket({
					userId: this.userId,
				}).then((response) => {
					const {
						data
					} = response;
					this.sdkInfo = data;
				});
			},
			enterRoom(item) {
				console.log(item.meetingRoomId)
				console.log(item)
				this.$router.push({
					path: "/rome",
					// name: "ConferenceRoom",
					query: {
						sdkInfo: this.sdkInfo,
						userId: this.userId,
						roomNum: item.meetingRoomId,
						meetingInfo: item,
					},
				});
			},
			handleClose() {
				this.qjsq = false
				this.qjlb = false
				this.lishiList = false
				this.huiyiList = false
			},
			/** 查询用户列表 */
			getUserList() {
				if (this.queryParams.deptId) {
					//
				} else {
					this.queryParams.deptId = this.deptId
				}
				listUser(this.queryParams).then((response) => {
					this.userList = response.rows;
					this.total = response.total;
				});
			},
			openHtml() {
				window.open(
					'https://mp.weixin.qq.com/mp/homepage?__biz=MzI0NzkzOTY1Nw==&hid=14&sn=0dab13b3bca18fade6daaac50fa962ad&scene=18&devicetype=android-29&version=2800163d&lang=zh_CN&nettype=WIFI&ascene=7&session_us=gh_cb3f57a7ccc5&pass_ticket=q4gWuAvHeMFIAgzORjZsMw286CYd8cFiZMPGmkaW0PsE15JeoX%2BX9qlWGn3A2XP1&wx_header=3'
				)
			},
			// onSubmit() {
			//         console.log('submit!');
			// 		addLeave(this.qjform).then(res=>{
			// 			console.log(res)
			// 		})
			// },
			goHyDetail(item) {
				this.$router.push({
					path: "/detail",
					query: {
						meetingInfo: item,
						dept: this.deptId
					},
				});
			},
			getMeetings() {
				let queryParams = {
					pageNum: 1,
					pageSize: 10,
					meetingMembers: this.userObj.phonenumber,
					status: 0,
				};
				listMeeting(queryParams).then((response) => {
					this.meetingList = response.rows;
					// this.meetingList = this.meetingList.concat(response.rows);
					// this.meetingList = this.meetingList.concat(response.rows);
					// this.meetingList = this.meetingList.concat(response.rows);
				});
				queryParams.status = 1;
				listMeeting(queryParams).then((response) => {
					this.hyList = response.rows;
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
					// this.hyList = this.hyList.concat(response.rows);
				});
			},
			backRoom() {
				this.$router.push("/index");
			},
			changeDeptId(deptId, name) {
				console.log(deptId)
				if (deptId == 258) {
					this.$router.push({
						path: "/appointment",
						query: {
							dept: 287,
							backup: this.deptId,
							name: name
						},
					});
					return
				}
				if (deptId == 332) {
					this.getQjList();
					return
				}
				if (deptId == 286) {
					this.$router.push({
						path: "/fileList",
						query: {
							name: "文字资料",
							key:1,
						},
					});
					return
				}
				if (deptId == 285) {
					this.$router.push({
						path: "/fileList",
						query: {
							name: "视频资料",
							key:2,
						},
					});
					return
				}
				this.$router.push({
					path: "/appointment",
					query: {
						dept: deptId,
						backup: this.deptId,
						name: name
					},
				});
			},

			loadTreedata() {

				let deptId = this.$route.query.dept;
				if (deptId) {

				} else {
					deptId = ""
				}
				treeselect(deptId).then((response) => {
					console.log(response)
					this.treeArr = response.data[0].children;
					this.treeData = response.data;
				});
			},
			getQjList(e = {}) {
				let queryParams = {
					pageNum: e.page || this.queryParams.pageNum,
					pageSize: e.limit || this.queryParams.pageSize,
				};
				listLeave(queryParams).then(res => {
					console.log(res)
					this.qjlb = true
					this.tableData = res.rows
					this.queryParams.total = res.total

				})
			},
			/** 提交按钮 */
			submitForm() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.qjform.id != null) {
							updateLeave(this.qjform).then(response => {
								this.$message.success('修改成功')
								this.qjsq = false;
								this.getQjList();
							});
						} else {
							addLeave(this.qjform).then(response => {
								console.log()
								this.$message.success('新增成功')
								this.qjsq = false;
								this.getQjList();
							});
						}
					}
				});
			},
		},
	};
</script>
<style scoped>
	::-webkit-scrollbar {
		/*高宽分别对应横竖滚动条的尺寸*/
		width: 10px;
		background-color: rgba(255, 255, 255, 0.1);
	}

	.app-container {
		/* background-color: #ffffff;
		height: calc(100% - 200px);
		overflow-x: hidden; */
		/* border-radius: 20px; */
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.video-box {
		overflow-x: hidden;
		height: calc(100vh - 230px);
	}

	.video-box div {
		float: left;
	}

	.video-box .all {
		border: 1px solid #ccc;
		width: calc(310px - 20px);
		margin: 10px;
		padding: 20px;
		border-radius: 10px;
	}

	.btn-box {
		position: fixed;
		bottom: 20px;
		width: 100%;
		display: flex;
		justify-content: center;
	}

	.index-panel {
		margin: 100px;
		height: calc(100vh - 260px);
		overflow-x: hidden;
	}

	.index-panel>div {
		float: left;
		display: flex;
		align-items: center;
		width: calc(20% - 40px);
		margin: 20px;
		height: 120px;
		text-align: center;
		background-image: linear-gradient(to bottom, #ffda81, #fff9c6);
		padding: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 30px;
		font-size: 26px;
		font-weight: bold;
		color: #f20000;
	}

	.popup-panel {
		margin: 100px;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: calc(100vh - 260px);
		background-color: #ffffff;
		overflow-x: hidden;
		border-radius: 20px;
		padding: 30px
	}

	.top-left {
		position: fixed;
		left: 30px;
		top: 30px;
	}

	.bottom-left {
		position: fixed;
		left: 30px;
		bottom: 30px;
	}

	.iframe {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		display: block;
	}

	h2 {
		text-align: center;
		line-height: 120px;
		font-size: 56px;
		color: #ffef92;
		margin-bottom: -120px;
		margin-top: 36px;
	}
</style>
